<template>
  <div class="news-com">
    <title-com :title="title"></title-com>
     <div class="list">
       <ul>
         <li @click="goToDetail(item)" v-for="item in news">
          <div class="left">
            <img :src="getUrl(item.img)" alt="">
          </div>
           <div class="right">
             <h3>{{item.title}}</h3>
             <p>
               {{item.description}}
             </p>
             <span>
               <a  :href="`#/news/dongtai/${item.id}`">［详情］</a>
             </span>
           </div>
         </li>
       </ul>
       <div class="more">
         <a  :href="`#/news/`">查看更多</a>
       </div>
     </div>
  </div>
</template>

<script>
  import titleCom from "./titleCom"

  export default {
    props: ['title','data'],
    computed: {
      news(){
        if(!this.isNullOrEmpty(this.data)){
          this.data.length = 2;
        }
        return this.data
      }
    },
    data() {
      return {

      }
    },
    components: {
      titleCom
    },
    mounted() {

    },
    methods: {
      goToDetail(item){
        console.log(item);
      }
    }
  }
</script>

<style lang="less">
  @import "~assets/style/public";
  .news-com{
    margin-right: 20/@size;
    .list{
      padding-top: 10/@size;
      ul{
        li {
          display: flex;
          border-bottom: 1px dotted #D5D5DB;
          padding: 10/@size 0;
          .left {
            width: 200/@size;
            height: 150/@size;
            img{
              width: 200/@size;
              height: 150/@size;
            }
          }
          .right{
            padding-left: 14/@size;
            h3{
              font-family: @font-first;
              font-size: 16/@size;
              color: #222222;
              line-height: 24/@size;
              .over-flow-text();
              margin-bottom: 20/@size;
            }
            p{
              font-family: @font-first;
              font-size: 14/@size;
              color: #606266;
              line-height: 24/@size;
              .over-flow-text();
            }
            span{
              display: flex;
              justify-content: flex-end;
              padding-top: 10/@size;
              a{
                font-family: @font-first;
                font-size: 14/@size;
                color: #1FA4E9;
                font-style: normal;
                cursor: pointer;
                text-decoration: none;
              }
            }
          }
        }
      }
      .more{
        font-family: @font-first;
        font-size: 16/@size;
        color:@theme-color;
        padding-top: 12/@size;
        display: flex;
        justify-content: flex-end;
        a{
          border-bottom: 1px solid @theme-color;
          cursor: pointer;
          text-decoration: none;
          color: @theme-color;;
        }
      }
    }
  }

  @media (min-width: 320px) and (max-width: 767px) {
    .news-com{
      margin-bottom: 40/@size;
      .list{
        ul{
          li {
            .right{
              h3{
                font-size: @font-28;
                line-height: 34/@size;
              }
              p{
                font-size: @font-24;
                line-height: 34/@size;
              }
              span{
                i{
                  font-size: @font-24;
                }
              }
            }
          }
        }
        .more{
          justify-content: center;
          font-size: @font-24;
        }
      }
    }
  }
</style>
